<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>找回密码-${setting.name}</title>
		[#include "common/include.ftl"]
		<link rel="stylesheet" href="${base}/resource/plug/buttons/buttons.css">
		<link rel="stylesheet" href="${base}/resource/css/register.css">
		<script src="${base}/resource/js/jquery.validate.min.js"></script>
	</head>
	<body class="customer">
		<div class="top w1">
			[#include "/common/header-top.ftl"/]
			<div class="top-search w">
				<div id="header-logo" class="text-log">
					<div class="t-log">
						<a href="${base}/index.jhtml">
							<img src="[@Pic pic=setting.logo/]" width="200" height="60">
						</a>
					</div>
					<div class="t-text">
						忘记密码
					</div>
				</div>
			</div>
		</div>
		<div id="F-pwd">
			<div class="F-wrap">
				<h2>找回密码</h2>

				<div class="step">
					<div class="step-bg step1"></div>
					<div class="step-tit">
						<ul>
							<li class="t1 current">
								填写账户名
							</li>
							<li class="t2">
								验证身份
							</li>
							<li class="t3">
								重置密码
							</li>
							<li class="t4">
								完成
							</li>
						</ul>
					</div>
					<form action="${base}/forget/checkMember.jhtml" id="F-form" onsubmit="return false;">
						<input type="hidden" name="captchaId" value="${captchaId}"/>
						<div id="form-groups-list">
							<dl>
								<dt>
									账户名:
								</dt>
								<dd>
									<input placeholder="用户名/手机号/邮箱" type="text" name="username" class='placeholder'>
									<p class="err-msg"></p>
								</dd>
							</dl>
							<dl>
								<dt>
									验证码:
								</dt>
								<dd class="captcha">
									<input type="text" name="captcha" class="upper placeholder"  placeholder="验证码"/>
									<img src="${base}/captcha.jhtml?captchaId=${captchaId}"  onclick="refreshCaptcha();" height="36px" />
									<a onclick="refreshCaptcha();" href="javascript:">看不清?换一张</a>
									<p class="err-msg"></p>
								</dd>
							</dl>
							<dl class="step-btn">
								<dt>
									&nbsp;
								</dt>
								<dd>
									<button class="button button-caution">
										下一步
									</button>
								</dd>
							</dl>
						</div>
					</form>
				</div>
			</div>
			[#include "common/footer-simple.ftl"]
		</div>

		<script>
			(function() {
				$(function() {
					var rules;
					rules = {
						rules : {
							username : {
								required : true
							},
							captcha : {
								required : true
							}
						},
						messages : {
							username : {
								required : "请输入用户名"
							},
							captcha : {
								required : "请输入验证码"
							}
						},
						errorPlacement : function(error, element) {
							return error.appendTo(element.parent().find('.err-msg'));
						},
						submitHandler : function() {
							ajax({
								url : $('#F-form').attr('action'),
								async : false,
								data : $('#F-form').serializeArray(),
								showError : true,
								success : function(data) {
									if (data.type == 'success') {
										location.href = base + "/forget/step2.jhtml?token=" + data.content;
									}
								},
								complete : function() {
									refreshCaptcha();
								}
							});
						}
					};
					return $('#F-form').validate(rules);
				});
			}).call(this);

			function refreshCaptcha() {
				$('.captcha>img').attr('src', '${base}/captcha.jhtml?captchaId=${captchaId}&timestamp=' + new Date().getTime());
			}
		</script>
	</body>
</html>